<template>
  <div>
    <base-header text="选择遥控设备类型"></base-header>
    <div style="background: rgba(0, 0, 0,0.2);">
      <div class="main-body"  :style="{height: height + 'px'}" >
        <div v-if="list.length != 0 && item.tid == 7" class="telecontroller-item" :class="{last: (index + 1) % 4 === 0}"
            :style="{width: itemWidth + 'px',height: itemWidth + 'px'}" @click="itemClick(item)" 
            v-for="(item,index) in list" :key="index">
          <div v-show="showMinus"  class="t-e-div1" ></div>
          <div :style="styleList[item.tid]" style="width: 100%;height: 100%;background-size: 100% 100%;"></div>
        </div>
      </div>
      <div class="detailsBefor">

      </div>
      <div class="details">
          <div class="div1">
            <div class="divimg"><img src="../assets/details.png" alt=""></div>
            <div class="divp">详情</div>
          </div>
      </div>
    </div>
  </div>
</template>
<script>
  import BaseHeader from "../components/BaseHeader.vue";

  export default {
    components: {BaseHeader},
    data() {
      return {
        //@touchstart="touchstart3"   @click.stop="clickMinus"  @click="disapperMinus"
        height: window.innerHeight - (470*(window.innerWidth/1080)),
        itemWidth: (window.innerWidth - 70) / 4,
        showMinus:false,
        setTimeOutMinus:'',
        list: [
         {
           name: '空调',
           tid: 7
         },
         {
           name: '电视机',
           tid: 1
         }
        ],
        styleList:{
          7:{
            backgroundImage: 'url(' + require('../assets/AirConditioner.png') + ')'
          }
        }
      }
    },
    created() {
      window.typeList = this.typeList
    },
    mounted() {
      if (localStorage.getItem('from') === 'android') {
        window.android.getTypeList()
        
      } else if (localStorage.getItem('from') === 'ios') {
        window.webkit.messageHandlers.getTypeList.postMessage('')
      }
    },
    methods: {
      itemClick(v) {
        if (v.tid === 7) {
          this.$router.push({name: 'SelectBrand', query: {tid: v.tid}})
        }
      },
      typeList(v) {
        this.list = v.typeList
      },
      // clickMinus(){
      //   console.log("删除")
      // },
      // touchstart3(){
      //   let _this = this;
      //   this.setTimeOutMinus = setTimeout(function(){
      //     _this.showMinus = true;
      //   },1500)
      // },
      // disapperMinus(){
      //   if(this.showMinus === true){
      //     this.showMinus = false;
      //   }
      // }
    }
  }
</script>
<style scoped>
  .telecontroller-item {
    position: relative;
    display: inline-block; 
    text-align: center;
    margin-right: 10px;
    margin-bottom: 10px;
  }
  .telecontroller-item .t-e-div1{
    width: 0.62rem;
    height: 0.62rem;
    background: url(../assets/jianhao.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    background-color: pink;
    border-radius: 0.62rem;
    right: -5px;
    top: -5px;  
    z-index: 10; 
  }
  .telecontroller-item.last{
    margin-right: 0;
  }
  .main-body{
    overflow: auto;
    padding: 0.55rem 0.4rem 0 0.4rem;
  }
  .detailsBefor{
    height: 1px;
    width: 100%;
    background: url(../assets/changxixian.png) no-repeat 0 0;
    background-size:100% 1px ;
  }
  .details{
    height: 1.9rem;
    width: 100%;
    background: url('../assets/detailsBg.png')no-repeat;
    background-size:100% 100%; 
    
  }
  .details .div1{
    width: 1.68rem;
    
    padding: 0.35rem 0.2rem 0 0.2rem;
    margin: 0 auto;

  }
    .details .div1 .divimg{
      width: 0.68rem;
      height: 0.68rem;
      margin:  0 auto;
    }
    .details .div1 .divp{
      width: 1.68rem;
      height: auto;

      font-size: 0.36rem;
      color: #fff;
      text-align: center;
      margin: 0.18rem auto 0 auto;
      
      
    }
    .details .div1 .divimg img{
      width: 100% ;
      height: 100%;
      display: block;
      float: left;
    }

</style>
